<template>
    <div class="totalbox">
        <div class="top">
            <img src="@/assets/image/home/stj.png" class="jpng" alt="">
            <div class="st">
                离线设备
            </div>
            <div class="sbtns flex-start" @click="open">
                <div class="sts">更多</div>
                <img src="@/assets/image/home/bf.png" class="bf" alt="">
            </div>
        </div>

        <div class="offbox">
            <div class="flex-between bgg">
                <div class="flex-start ">
                    <div :class="[data.zindex == index ? 'active' : '', 'listitem']" v-for="(item, index) in data.list"
                        @click="changeTit(index)">
                        {{ item.name }}
                    </div>
                </div>
                <div class="offt">
                    <span>设备数：{{ data.zindex == 0 ? screenStore.totalMessage.electricityOfflineCount :
                        screenStore.totalMessage.waterOfflineCount }}台</span>
                </div>
            </div>
            <div class="offlist" ref="tableContainer">
                <el-table
                    :data="data.zindex == 0 ? screenStore.totalMessage.electricityOfflineDevices : screenStore.totalMessage.waterOfflineDevices"
                    height="340" style="width: 100%" empty-text="暂无数据" @mouseenter="stopScroll"
                    @mouseleave="createScroll" ref="tableRef">
                    <el-table-column type="index" align="center" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="campusName" align="center" label="校区" width="80" />
                    <el-table-column prop="dormitoryRoomName" align="center" label="宿舍号" width="80" />
                    <el-table-column prop="deviceId" align="center" label="设备ID" width="80" />
                    <el-table-column prop="usedNum" align="center" label="已用电量/水量" />
                </el-table>
            </div>
        </div>
        <draw-tan-one ref="tanone"></draw-tan-one>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue'
import drawTanOne from '@/components/drawTanOne.vue'
const { proxy } = getCurrentInstance()
import { useScreenStore } from '../store/index.js'
const screenStore = useScreenStore()
let data = reactive({
    zindex: 0,
    list: [
        {
            name: '电', value: '1'
        },
        {
            name: '水', value: '2'
        }]
})
let tanone = ref(null)
let open = () => {
    tanone.value.open()
}
let changeTit = (index) => {
    data.zindex = index
}

const tableContainer = ref(null);
const tableRef = ref(null);
let timer = null;
// 停止滚动
const stopScroll = () => {
    clearInterval(timer);
    timer = null;
};

watch(() => [screenStore.totalMessage.electricityOfflineDevices, screenStore.totalMessage.waterOfflineDevices], ([newValElc, oldValElc], [newValWat, oldValWat]) => {
    if (data.zindex == 0) {
        if (newValElc?.length == 0) {
            stopScroll()
        } else {
            createScroll()
        }
    }
    if (data.zindex == 1) {
        if (newValWat?.length == 0) {
            stopScroll()
        } else {
            createScroll()
        }
    }
}, { deep: true }, { immediate: true })

// 创建滚动效果
const createScroll = () => {
    stopScroll(); // 先清除已有的定时器
    if (data.zindex == 0) {
        if (screenStore?.totalMessage?.electricityOfflineDevices?.length == 0) {
            return
        }
    }
    if (data.zindex == 1) {
        if (screenStore?.totalMessage?.waterOfflineDevices?.length == 0) {
            return
        }
    }
    // 确保DOM已更新
    nextTick(() => {
        // 获取表格滚动容器
        const table = tableRef.value.layout.table.refs;
        const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
        // 设置滚动定时器
        timer = setInterval(() => {
            tableWrapper.scrollTop += 1; // 每次滚动1px
            // 检测是否滚动到了底部
            if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight - 1) {
                tableWrapper.scrollTop = 0; // 回到顶部，实现循环
            }
        }, 20); // 滚动间隔，控制滚动速度
    });
};

// 组件挂载时启动滚动
onMounted(() => {
    createScroll();
    data.zindex = 0
});

// 组件卸载时清理定时器
onUnmounted(() => {
    stopScroll();
});
</script>

<style lang='less' scoped>
.totalbox {
    background-image: url('@/assets/image/home/sbbd.png');
    background-size: 492px 500px;
    background-repeat: no-repeat;
    margin-top: 22px;
    width: 492px;
    height: 500px;
    overflow: hidden;
    // background-color: rgba(8, 39, 84, 0.5);

    .top {
        background-image: url('@/assets/image/home/tbg.png');
        background-size: 492px 52px;
        background-repeat: no-repeat;
        width: 492px;
        height: 52px;
        padding: 10px 13px 0px;
        position: relative;

        .jpng {
            width: 480px;
            height: 45px;
            margin-left: -28px;
            margin-top: -5px;
        }

        .st {
            color: #fff;
            font-size: 20px;
            position: absolute;
            font-weight: bold;
            top: 10px;
            left: 52px;
            background: linear-gradient(180deg, #FFF 55.26%, #34E1FF 93.42%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sbtns {
            border-radius: 2px;
            border: 1px solid rgba(29, 178, 255, 0.27);
            position: absolute;
            right: 50px;
            top: 8px;
            padding: 5px 15px;

            .sts {
                color: #21BCFF;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            .bf {
                width: 7px;
                height: 9px;
                margin-left: 5px;
            }
        }
    }

    .offbox {
        margin: 10px 22px 0px 17px;
        border-radius: 2px;

        .bgg {
            padding: 10px 36px 10px 10px;
            background: rgba(93, 157, 211, 0.14);
        }

        .listitem {
            padding: 5px 20px;
            color: rgba(255, 255, 255, 0.28);
            font-size: 16px;
            font-weight: 400;
            border-radius: 1px;
            border: 1px solid rgba(255, 255, 255, 0.33);
            margin-right: 10px;
        }

        .active {
            color: #21BCFF;
            border: 1px solid #1AA4FE;
            background: linear-gradient(180deg, rgba(66, 167, 255, 0.41) 0%, rgba(40, 100, 153, 0.00) 100%);
        }

        .offt {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1.54px;
            background: linear-gradient(180deg, #1BA7FF 56.9%, #30CCEA 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .offlist {
            margin-top: 12px;

            :deep(.el-table) {
                --el-table-bg-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
                --el-table-tr-bg-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
                --el-table-border-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
                color: #CAD4E5;
            }

            :deep(.el-table thead) {
                color: #CAD4E5;
            }

            :deep(.el-table th.el-table__cell) {
                background: linear-gradient(180deg, rgba(25, 158, 255, 0.26) 0%, rgba(25, 158, 255, 0.72) 100%);
            }

            :deep(.el-table .el-table__body tr:hover>td) {
                background-color: transparent !important;
                /* 或者你想要的其他样式 */
            }

            :deep(.el-table__body) {
                border-collapse: separate !important;
                border-spacing: 0 5px !important;
                table-layout: auto !important;
            }

            :deep(.el-table tr) {
                background: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
            }

            .circle {
                display: inline-block;
                padding: 2px 10px;
                border-radius: 50%;
                border: 2px solid #1899FF;
            }

            .ci {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 14px;
                height: 14px;
            }

        }

    }
}
</style>